<template>
  <div ref="container" class="Business text-white">
    <div v-if="token" class="edit-view">
      <div v-if="openEdit === 0" class="btn" @click="openEditFun(1)">
        打开编辑
      </div>
      <div v-else class="btn" @click="closeEdit">取消编辑</div>
      <div v-if="openEdit === 1" class="btn yu" @click="openEdit = 2">
        预览效果
      </div>
      <div v-if="openEdit === 2" class="btn yu" @click="openEditFun(1)">
        继续编辑
      </div>
      <div v-if="openEdit !== 0" class="btn save" @click="EidtPageIndexInfoFun">
        保存编辑
      </div>
    </div>
    <div class="home-video">
      <video
        v-if="silibInfo && silibInfo.PicPath"
        ref="video"
        class="home-video"
        autoplay
        loop
        :muted="muted"
        :src="silibInfo.PicPath"
      ></video>
      <icons @click="playPause" class="icon a" :name="play ? 'bof' : 'zant'" />
      <icons
        @click="muted = !muted"
        class="icon b"
        :name="!muted ? 'yinl' : 'jiny'"
      />
      <div v-if="isEdit" class="btn-view">
        <div class="btn">
          上传首页视频
          <input type="file" @change="handleFileUpload" accept="video/mp4" />
        </div>
      </div>
    </div>
    <div v-if="silibInfo" id="scrollTarget" class="nav-list-view">
      <div
        v-for="info in silibInfo.SleepType"
        :key="info.Id"
        class="nav"
        :class="curentTypeId === info.Id ? 'active' : ''"
        @click="GetSleepFun(info.Id)"
      >
        {{ info.TypeName }}
      </div>
    </div>
    <div v-for="(item, i) in listdata" :key="item.Id" class="content-view">
      <div
        v-if="i % 2 === 0"
        class="card-text-view"
        @click="toPage('/sdetail/' + item.Id)"
      >
        <div class="card-item text" :style="contentStyle">
          <div class="title">{{ item.TitleA }}</div>
          <div class="line"></div>
          <div class="desc">
            {{ item.IntroduceA }}
          </div>
          <div class="next-step">
            <div class="text">阅读更多</div>
            <icons class="icon" name="jiantou" />
          </div>
        </div>
        <div class="card-item img" :style="contentStyle">
          <img :src="item.IndexPicPath" alt="" />
        </div>
      </div>
      <div v-else class="card-text-view" @click="toPage('/sdetail/' + item.Id)">
        <div class="card-item img" :style="contentStyle">
          <img :src="item.IndexPicPath" alt="" />
        </div>
        <div class="card-item textr" :style="contentStyle">
          <div class="title">{{ item.TitleA }}</div>
          <div class="line"></div>
          <div class="desc">
            {{ item.IntroduceA }}
          </div>
          <div class="next-step" @click="toPage('/sdetail/' + item.Id)">
            <div class="text">阅读更多</div>
            <icons class="icon" name="jiantou" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Cookies from "js-cookie";
import { computed, ref, onMounted } from "vue";
import { useRouter, onBeforeRouteUpdate } from "vue-router";
import {
  EidtResponsibility,
  GetResponsibility,
  UploadFile,
  GetSleep,
  GetSleepType,
} from "@/server";
import { useAppStore } from "@/store/modules/user";
const store = useAppStore();
const router = useRouter();
const token = Cookies.get("token");
const openEdit = ref(0);
const muted = ref(true); //静音
const play = ref(true); //静音
const video = ref(null) as any;
const playPause = () => {
  const v = video.value;
  // 如果视频正在播放，暂停它；否则，播放它。
  if (v.paused) {
    v.play();
    play.value = true;
  } else {
    v.pause();
    play.value = false;
  }
};
const closeEdit = () => {
  openEdit.value = 0;
};
const isEdit = computed(() => openEdit.value === 1);
const container = ref<HTMLElement | null>(null);
const contentStyle = ref({ width: "50%", height: "auto" });
const silibInfo = ref(null) as any;
const curentTypeId = ref("");
onBeforeRouteUpdate(() => {
  // 如果 shouldReload 为 true，则重新加载数据
  const typeId = sessionStorage.getItem("typeId");
  if (typeId) {
    GetResponsibilityFun();
  }
});
const handleFileUpload = async (event: any) => {
  const file = event.target.files[0];
  let newimgdata = URL.createObjectURL(file);
  const fd = new FormData();
  fd.append("file", file);
  const res: any = await UploadFile(fd);
  if (res.Tag === 1) {
    const FileName = res.Data[0].FileName;
    silibInfo.value.Pic = FileName;
    silibInfo.value.PicPath = newimgdata;
  } else {
    store.error(res.Message); // 错误提示
  }
};
const GetResponsibilityFun = async () => {
  const res: any = await GetResponsibility({});
  if (res.Tag === 1) {
    silibInfo.value = res.Data;
    const typeId = sessionStorage.getItem("typeId");
    if (typeId) {
      curentTypeId.value = typeId;
      GetSleepFun(curentTypeId.value);
      sessionStorage.removeItem("typeId");
      setTimeout(() => {
        const scrollTarget = document.getElementById("scrollTarget");
        const dom: any = scrollTarget?.getBoundingClientRect();
        window.scrollTo({ top: dom.top - 140, behavior: "smooth" });
      }, 100);
    } else if (res.Data.SleepType.length > 0) {
      curentTypeId.value = res.Data.SleepType[0].Id;
      GetSleepFun(curentTypeId.value);
    }
  } else {
    store.error(res.Message); // 错误提示
  }
};
const openEditFun = (n: number) => {
  openEdit.value = n;
  GetSleepTypeFun();
};
const classList = ref([]) as any;
const GetSleepTypeFun = async () => {
  const res: any = await GetSleepType({
    TypeName: "", //ID 查询接口返回
  });
  if (res.Tag === 1) {
    classList.value = res.Data;
  } else {
    store.error(res.Message); // 错误提示
  }
};
GetResponsibilityFun();
const EidtPageIndexInfoFun = async () => {
  const res: any = await EidtResponsibility({
    Pic: silibInfo.value.Pic,
    Operator: token,
  });
  if (res.Tag === 1) {
    GetResponsibilityFun();
    store.success(res.Message); // 错误提示
  } else {
    store.error(res.Message); // 错误提示
  }
};
const listdata = ref([]) as any;
const GetSleepFun = async (id: string) => {
  curentTypeId.value = id;
  const res: any = await GetSleep({
    TypeId: id,
    TitleA: "",
    IsResponsibility: 1,
    CurrentPage: 1, //当前页
    PageSize: 1000, //每页的条数
  });
  if (res.Tag === 1) {
    listdata.value = res.Data;
  } else {
    store.error(res.Message); // 错误提示
  }
};

const handleResize: ResizeObserverCallback = (entries) => {
  if (entries[0].target) {
    const containerWidth = entries[0].contentRect.width;
    const radio = 960 / 642;
    const w = containerWidth / 2;
    contentStyle.value = { width: w + "px", height: "auto" };
  }
};
/**
 * @description: 页面跳转实例
 * @param {*} url
 * @return {*}
 * @author: cool panda
 */
const toPage = (url: string) => {
  window.open(url, "_blank");
};
onMounted(() => {
  const resizeObserver = new ResizeObserver(handleResize);
  if (container.value) {
    resizeObserver.observe(container.value);
  }

  return () => {
    if (container.value) {
      resizeObserver.unobserve(container.value);
    }
    resizeObserver.disconnect();
  };
});
</script>
<style lang="less" scoped>
.Business {
  width: 100%;
  .home-video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .btn-view {
      position: absolute;
      .btn {
        position: relative;
        input {
          cursor: pointer;
          position: absolute;
          opacity: 0;
          width: 100%;
          height: 100%;
        }
        &:hover {
          opacity: 1;
        }
        transition: opacity 0.3s;
        opacity: 0.8;
        cursor: pointer;
        border-radius: 4px;
        min-width: 200px;
        padding: 0 20px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #ffffff;
        background: #cd3755;
      }
    }
  }
  .nav-list-view {
    margin: 80px 0 70px;
    display: flex;
    justify-content: center;

    .nav {
      &.active {
        color: #000;
      }
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #7c7c7c;
      line-height: 37px;
      margin-right: 40px;
    }
  }
  .content-view {
    .card-text-view {
      display: flex;
      margin-bottom: 74px;
      .card-item {
        width: 50%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        img {
          max-width: 100%;
          max-height: 100%;
          object-fit: cover;
        }
        &.text {
          padding: 0 5% 0 8%;
        }
        &.textr {
          padding: 0 8% 0 5%;
        }
        .title {
          font-size: 22px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #000000;
          line-height: 45px;
          text-align: left;
        }
        .line {
          width: 96px;
          height: 4px;
          background: #f3f3f3;
          margin-top: 18px;
          margin-bottom: 14px;
        }
        .desc {
          text-align: left;
          font-size: 15px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;
          line-height: 32px;
        }
        .next-step {
          width: 100%;
          margin-top: 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .text {
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 22px;
          }
          .icon {
            color: #000;
            width: 1.2em;
            height: 1.2em;
          }
        }
      }
    }
  }
}
</style>
